<template>
  <div>

    <div v-show="!loading">
      <el-card class="box-card1">
        <div slot="header" class="clearfix">
          <span class="head">欢迎登陆校园疫情防控管理系统</span>

        </div>
        <el-form ref="form" :model="loginForm" label-width="80px" class="form">
          <div class="div1">
            <el-form-item label="用户名:" class="text item">
              <el-input prefix-icon="el-icon-user-solid" autofocus v-model="loginForm.username" placeholder="请输入用户名"
                        style="width: 300px;background:transparent" @keyup.enter.native="handleLogin" class="input"></el-input>
            </el-form-item>
            <el-form-item label="密码:" class="text item">
              <el-input placeholder="请输入密码" prefix-icon="el-icon-lock icon" v-model="loginForm.password" autocomplete="off" show-password
                        style="width: 300px;background-color: rgba(0,0,0,0);" @keyup.enter.native="handleLogin" class="input"></el-input>
            </el-form-item>
          </div>
          <div class="div2">
            <el-button type="primary" class="button" round @click.native.prevent="handleLogin">登陆</el-button>
            <el-button type="success" class="button" @click="loading=!loading" round>注册</el-button>
          </div>
        </el-form>
      </el-card>
    </div>


    <div v-show="loading">
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span class="head">欢迎注册校园疫情防控管理系统</span>
        </div>
        <el-form ref="form" :model="registerForm" label-width="80px" class="form">
          <div class="div1">
            <el-form-item label="用户名:" class="text item">
              <el-input prefix-icon="el-icon-user-solid" autofocus v-model="registerForm.username" placeholder="请输入用户名"
                        style="width: 300px;background:transparent" class="input"></el-input>
            </el-form-item>
            <el-form-item label="密码:" class="text item">
              <el-input placeholder="请输入密码" prefix-icon="el-icon-lock icon" v-model="registerForm.password"
                        show-password autocomplete="off"
                        style="width: 300px;background-color: rgba(0,0,0,0);" class="input"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" class="text item">
              <el-input placeholder="请再次输入密码" prefix-icon="el-icon-lock icon" v-model="registerForm.repassword"
                        show-password autocomplete="off"
                        style="width: 300px;background-color: rgba(0,0,0,0);" class="input"></el-input>
            </el-form-item>
            <el-form-item label="身份:">
              <el-select v-model="registerForm.depart" placeholder="请选择" style="width: 300px">
                <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>

          </div>
          <div class="div2">
            <el-button type="primary" class="button" @click="loading=!loading" round>返回登陆</el-button>
            <el-button type="success" class="button" @click="register" round>确认注册</el-button>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>

</template>

<script>
export default {
  created() {
    axios.get("http://localhost:8080/depart/findAll").then((resp) => {
      this.options = resp.data;
    });
  },
  name: "login",
  data() {
    return {
      options: [],
      loginForm: {
        username: "",
        password: ""
      },
      registerForm: {
        username: "",
        password: "",
        repassword: "",
        depart: ""
      },
      loading: false
    }
  },
  methods: {
    register(){
      if(this.registerForm.username==""||this.registerForm.password=="") {
        this.$message({
          showClose: true,
          message: '注册用户名或密码不能为空',
          type: 'error'
        });
      }else if(this.registerForm.password==this.registerForm.repassword){
        axios.post('http://localhost:8080/userlogin/register',this.registerForm).then((resp)=>{
          console.log(resp)
          this.loading=true;
          if(resp.data=='success'){
            this.$message({
              showClose: true,
              message: '注册成功!请登录',
              type: 'success'
            });
            this.loading=false;
          }else if(resp.data=='repeat'){
            this.$message({
              showClose: true,
              message: '用户名已存在!请重新注册',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '注册失败!请重新注册',
              type: 'error'
            });
            window.location.reload()
          }
        })}
      else {
        this.$message({
          showClose: true,
          message: '两次输入的密码不一致!',
          type: 'error'
        });
      }
    },
    handleLogin() {
      axios.post('http://localhost:8080/userlogin/user', this.loginForm).then((resp) => {
        console.log(resp)
        this.loading = true;
        if (this.loginForm.username == "" || this.loginForm.password == "") {
          // this.$alert("用户名或密码不能为空")
          this.$message({
            showClose: true,
            message: '用户名或密码不能为空',
            type: 'error'
          });
          this.loading = false;
        } else {
          if (resp.data == 'success') {
            this.loading = false;
            this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
            this.$router.push('/index')
          } else {
            this.loading = false;
            this.$message({
              showClose: true,
              message: '用户名或密码错误',
              type: 'error'
            });
          }
        }

      })

    }
  }
}
</script>

<style>

.el-button+.el-button {
  margin-left: 35px !important;
}

.text {
  font-size: 30px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.clearfix {
  font-size: 30px;
}

.box-card1 {
  margin: 0 auto;
  margin-top: 200px;
  width: 500px;
  height: 300px;
  border-radius: 10px;
}

.box-card2 {
  margin: 0 auto;
  margin-top: 200px;
  width: 500px;
  height: 450px;
  border-radius: 10px;
}

.head {
  display: block;
  text-align: center;
}

.form {
  padding-left: 10px;

}

.button {
  width: 150px;
}

.item {
  margin: 0 auto;
}

body {
  /*background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);*/
  /*background-image: linear-gradient(90deg, #e0c3fc 30%, #8ec5fc 70%);*/
  background: url("../assets/444.jpg");
  /*background-color: #f5f5f5;*/
  background-size: cover;
}

/*.el-input__inner {*/
/*  background-color: transparent !important;*/
/*}*/

.div2 {
  text-align: center;
}
</style>